<template>
  <div class="container">
    <!-- 导航栏 -->
    <uni-nav-bar fixed="true" title="填写完成" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar>
    <!-- 内容区 -->
    <div class="content">
      <image class="bg" src="https://ustatic.hudongmiao.com/joymew-hostline/questionnaire-submission-success-bg.jpg"
        mode="aspectFill"></image>
      <div class="tip">
        <p>{{ targetIdentityZh }}还未填写问卷，</p>
        <p>快去转发让她填写吧！</p>
      </div>
    </div>
  </div>
  <!-- 底部固定栏 -->
  <div class="bottom-bar">
    <!-- 第一个按钮 -->
    <div class="small-btn first" @click="back">
      <image class="small-btn-icon" src="@/static/icons/common/edit-2.svg"></image>
      <div class="small-btn-text">重新编辑</div>
    </div>
    <!-- 第二个按钮 -->
    <div class="small-btn second" @click="viewTargetIdentityQuestionnaire">
      <image class="small-btn-icon" src="@/static/icons/common/eye.svg"></image>
      <div class="small-btn-text">查看{{ targetIdentityZh }}问卷</div>
      <button></button>
    </div>
    <!-- 右侧大按钮 -->
    <button class="big-btn" open-type="share" :data-id="questionnaireId">转发{{ targetIdentityZh }}填写</button>
  </div>
  <!-- 对方未填写问卷提示对话框 -->
  <uni-popup ref="partnerNoSurveyPopup" type="dialog">
    <div class="no-survey-popup-dialog">
      <span class="no-survey-popup-dialog-title">提示</span>
      <span class="no-survey-popup-dialog-content">{{ targetIdentityZh }}暂未填写该问卷，您可以将问卷转发Ta，Ta填写完成后您即可查看</span>
      <div class="no-survey-popup-dialog-cancel-btn" @click="targetUnansweredTipCancel">
        <button class="button">取消</button>
      </div>
      <div class="no-survey-popup-dialog-confirm-btn" @click="targetUnansweredTipConfirm">
        <button class="button" open-type="share" :data-id="questionnaireId"
          :data-title="currentQuestionnaire?.title">转发</button>
      </div>
    </div>
  </uni-popup>
</template>

<script lang="ts" setup>
import { identityMap } from '@/static/constants/questionnaire-constant';
import { useQuestionnaire } from '@/stores/questionnaire';
import { useUser } from '@/stores/user-store';
import { back, navigateTo } from '@/utils/navigate';
import { shareQuestionnaire } from '@/utils/others';
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import { getCurrentInstance } from 'vue';
import { ref } from 'vue';

const questionnaireStore = useQuestionnaire()
const { questionnaireAnswerStatus, currentQuestionnaire } = storeToRefs(questionnaireStore)
const { getAndSetQuestionnaireAnswerStatus } = questionnaireStore

const userStore = useUser()
const { userInfo } = storeToRefs(userStore)

const currentInstance = getCurrentInstance()

/** 目标身份名称（中文） */
const targetIdentityZh = ref('新娘');

/** 目标身份名称 */
let targetIdentity = '';

/** 问卷ID */
const questionnaireId = ref('');

// 页面加载后确定目标身份名称
onLoad((options) => {
  questionnaireId.value = options?.questionnaireId || '';
  targetIdentity = options?.targetIdentity || '';
  targetIdentityZh.value = identityMap.find((item) => item.en === targetIdentity)?.zh || '';

  // 获取问卷填写状态
  getAndSetQuestionnaireAnswerStatus(questionnaireId.value)
})

//#region 查看新郎/新娘问卷相关

/** 「查看新郎/新娘问卷」按钮点击事件 */
const viewTargetIdentityQuestionnaire = () => {
  /** 对方问卷回答情况 */
  const partnerAnswerStatus = questionnaireAnswerStatus.value?.find((item) => item.identity === targetIdentity)?.isAnswered
  console.log('questionnaireAnswerStatus', questionnaireAnswerStatus)
  console.log('partnerAnswerStatus', partnerAnswerStatus)
  if (!partnerAnswerStatus) {
    toggleNoSurvey(true)
    return
  }
  // 如果对方未填写问卷，则提示对话框
  navigateTo(
    'questionnaire-view-answer',
    {
      questionnaireId: questionnaireId.value,
      targetIdentity
    }
  )
}

/** 「转发新郎/新娘填写」按钮点击分享回调 */
onShareAppMessage((res) => {
  return shareQuestionnaire(res, userInfo.value.name, userInfo.value.id)
})

/** 「对方未填写问卷」提示对话框切换显示 */
const toggleNoSurvey = (isOpen: boolean) => {
  const targetUnansweredTip: any = currentInstance!.refs.partnerNoSurveyPopup
  if (isOpen) {
    targetUnansweredTip.open()
  } else {
    targetUnansweredTip.close()
  }
}

/** 「对方未填写问卷」提示对话框-取消按钮点击事件 */
const targetUnansweredTipCancel = () => {
  toggleNoSurvey(false)
}

/** 「对方未填写问卷」提示对话框-确定按钮点击事件 */
const targetUnansweredTipConfirm = () => {
  toggleNoSurvey(false)
}

/** 对方未填写问卷提示对话框关闭事件 */

//#endregion

</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;

  display: grid;
  grid-template:
    'nav-bar' auto
    'content' 1fr
    / 1fr;

  // 内容区
  .content {
    grid-area: content;

    width: 100vw;
    position: relative;

    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 177.9487vw;
    }

    .tip {
      position: absolute;
      bottom: calc(29.2308vw + constant(safe-area-inset-bottom));
      /*兼容 IOS<11.2*/
      bottom: calc(29.2308vw + env(safe-area-inset-bottom));
      /*兼容 IOS>11.2*/
      left: 8.9744vw;

      font-size: 15px;
      color: #ff5875;

      p {
        margin: 0;
      }
    }

  }
}

// 底部固定栏
.bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;

  background-color: #fff;

  box-sizing: content-box;
  width: 100%;
  height: 15.8974vw;
  padding-bottom: constant(safe-area-inset-bottom);
  /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom);
  /*兼容 IOS>11.2*/

  display: grid;
  grid-template:
    'first second big-btn'
    / 1fr 1fr 2fr;
  align-items: center;
  justify-items: center;

  // 左侧的两个小按钮
  .small-btn {
    display: flex;
    flex-direction: column;
    align-items: center;

    &.first {
      grid-area: first;
    }

    &.second {
      grid-area: second;
    }

    .small-btn-icon {
      width: 6.1538vw;
      height: 6.1538vw;
    }

    .small-btn-text {
      font-size: 23.08rpx;
      text-align: CENTER;
      color: #333333;
      line-height: 23.08rpx;
      flex-wrap: nowrap;
    }
  }

  // 右侧大按钮
  .big-btn {
    width: 90%;
    height: 10.7692vw;
    background: #17ce92;
    border-radius: 4px;
    text-align: center;
    font-size: 4.1026vw;
    font-weight: 600;
    color: #ffffff;
  }
}

// 对方未回答提示弹窗
.no-survey-popup-dialog {
  width: 300px;
  background-color: #fff;

  border-radius: 11px;
  overflow: hidden;

  display: grid;
  grid-template:
    'title title' 50px
    'content content' 1fr
    'cancel-btn confirm-btn' 45px;

  .no-survey-popup-dialog-title {
    grid-area: title;
    align-self: end;
    justify-self: center;

    color: #909399;
    font-size: 16px;
    font-weight: 500;
  }

  .no-survey-popup-dialog-content {
    grid-area: content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;

    font-size: 14px;
    color: #6C6C6C;
  }

  .no-survey-popup-dialog-cancel-btn {
    grid-area: cancel-btn;
    overflow: hidden;

    .button {
      background-color: #fff;
      border-radius: 0;
      scale: 1.15;
      translate: 0 3px;

      font-size: 15px;
      color: #333;
    }
  }

  .no-survey-popup-dialog-confirm-btn {
    grid-area: confirm-btn;
    overflow: hidden;

    border-left-color: #f0f0f0;
    border-left-style: solid;
    border-left-width: 1px;

    .button {
      background-color: #fff;
      border-radius: 0;
      scale: 1.15;
      translate: 0 3px;

      font-size: 15px;
      color: #007aff;
    }
  }
}
</style>
